<script setup lang='ts'>
import type { tagType } from './type'

import materialModule from './components/material-module.vue'
import { tabValue } from './type'

const fileType = ref<number>(tabValue.PIC_MANAGE)

// 回收站不能放入tabsList中，需要在用v-if判断，这样一来，每次切换tab时material-module不能完整的监听到fileType的变化
const tabsList: tagType[] = [
    {
        label: '图片管理',
        value: tabValue.PIC_MANAGE,
    },
    {
        label: '视频管理',
        value: tabValue.VIDEO_MANAGE,
    },
]
</script>

<template>
    <el-tabs v-model="fileType"
             class="material-type-tabs"
    >
        <el-tab-pane v-for="tabItem in tabsList"
                     :key="tabItem.value"
                     :label="tabItem.label"
                     :name="tabItem.value"
        >
            <material-module v-if="fileType === tabItem.value"
                             v-model="tabItem.value"
            />
        </el-tab-pane>

        <el-tab-pane label="回收站"
                     :name="tabValue.RECYCLE_BIN"
        >
            <div class="recycle-module">
                这是回收站模块
            </div>
        </el-tab-pane>
    </el-tabs>
</template>

<style lang="scss" scoped>
:deep(.el-tabs__nav-wrap::after) {
    height: 0;
}
</style>
